<template>
   <div class="flex justify-evenly h-300px">
    <div class="flex-center h-300px flex-col">
    <div class="ball"></div>
    <div class="shadow"></div>
   </div>
   <div class="flex-center h-300px flex-col gball">
    <div class="ball green"></div>
    <div class="shadow"></div>
   </div>
   <div class="flex-center h-300px flex-col bball">
    <div class="ball blue"></div>
    <div class="shadow"></div>
   </div>
   </div>
</template>

<script setup lang='ts'>

</script>
<style scoped>
.bounceBall {

}
.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(#e55, #b00);
  animation: move 500ms infinite alternate;
}
@keyframes move {
  form {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}
.shadow {
  width: 30px;
  height: 10px;
  border-radius: 100%;
  background: #000;
  margin-top: -4px;
  animation: shadowMove 500ms infinite alternate;
}
@keyframes shadowMove {
  from {
    opacity: .2;
    transform: scale(0.75);
  }
  to {
    opacity: .5;
    transform: scale(1);
  }
}
.blue {
  background: linear-gradient(#00a8ff, #8c7ae6);

}
.green {
  background: linear-gradient(rgb(161,201,128), rgb(1,99,37));
}
.gball .ball , .gball .shadow {
  animation-delay: 200ms;
}
.bball .ball , .bball .shadow {
  animation-delay: 400ms;
}
</style>
